<template>
	<view class="comments-section">
		<view class="think">想法</view>
		<!-- <view class="comment-input">
			 <image src="/path/to/user-icon.png" class="user-icon"></image> 
			<input type="text" placeholder="写点什么吧..." class="input" />
		</view> -->
		<view class="comments-list">
			<view class="comment-item" v-for="(comment, index) in lastComments" :key="index">
				<!-- <image :src="comment.userIcon" class="user-icon"></image> -->
				<view class="comment-content">
					<view class="avatar-username">
						<view class="avatar">
							<image :src="comment.user.avatar" class="avatar-img" />
						</view>
						<view class="username">{{ comment.user.nickname }}</view>
					</view>
					<view class="text">{{ comment.content }}</view>
				</view>
			</view>
		</view>
		<view class="all-comments" @click="gotoCommentList">全部 {{ commentsSum }} 条想法</view>
	</view>
</template>
<script setup>
import { ref, onMounted, computed } from "vue"
import { getCommentList } from "@/api/index.js"
const comments = ref([])
const lastComments = ref({})
const commentsSum = computed(() => comments.value.length)
const props = defineProps(['articleId', 'articleTitle'])
onMounted(async () => {
	const res = await getCommentList(props.articleId)
	console.log("comments:", res)
	comments.value = res
	// comments.value = res.sort((a, b) => {
	// 	return b.created_at - a.created_at // 降序排列
	// })
	lastComments.value = res.slice(0, 2)
})
const gotoCommentList = () => {
	uni.navigateTo({
		url: '/pages/commentList/commentList?articleId=' + props.articleId + '&articleTitle=' + props.articleTitle
	})
}
</script>
<style lang="scss" scoped>
.comments-section {
	border-top: 0.5px solid #eee;
	padding-top: 20px;
	margin-bottom: 20px;
	box-sizing: border-box;

	.think {
		color: #333;
		font-weight: 600;
		margin-bottom: 20px;
	}

	.all-comments {
		text-align: left;
		color: #a79921ce;
	}
}

.comment-input {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.user-icon {
	width: 30px;
	height: 30px;
	margin-right: 10px;
}

.input {
	flex: 1;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
}

.username {
	font-weight: bold;
}

.text {
	margin-top: 5px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	/* 限制4行 */
	overflow: hidden;
	font-size: 14px;
	color: #444;
	line-height: 1.5;
	/* 确保行高正常 */
}

.comments-list {
	margin-bottom: 20px;
}

.comment-item {
	display: flex;
	margin-bottom: 10px;
}

.comment-content {
	.avatar-username {
		display: flex;
		align-items: center;
		justify-content: flex-start;

		.avatar {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20px;

			.avatar-img {
				width: 20px;
				height: 20px;
				border-radius: 50%;
				overflow: hidden;
			}
		}

		.username {
			color: #999;
			font-size: 14px;
		}
	}

	.text {
		font-size: 14px;
		color: #444;
	}
}
</style>